<template>
	<view>
		<uv-navbar leftIcon='arrow-leftward' autoBack></uv-navbar>
		<uv-index-list :index-list="indexList" customNavHeight="100rpx">
			<template v-slot:header>
				<view class="headTitle">
					<view class="f24333">
						Al scenario chat
					</view>
					<view class="f14666">
						We sent a 6 digits verification code to:
					</view>
					<view class="f14666">
						15278451245
					</view>
				</view>
			</template>
			<template v-for="(item, i) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<uv-index-anchor :text="indexList[i]"></uv-index-anchor>
				<!-- #endif -->
				<uv-index-item>
					<!-- #ifndef APP-NVUE -->
					<!-- <uv-index-anchor :text="indexList[index]"></uv-index-anchor> -->
					<!-- #endif -->
					<view class="list-cell" v-for="(cell, k) in item" @click="onCell(cell)">

						<view class="cell-txt">
							{{cell}}
						</view>
						<uv-icon v-if="defaultValue===cell " name="checkmark"></uv-icon>
					</view>
				</uv-index-item>
			</template>
		</uv-index-list>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				defaultValue: 'English',
				indexList: ["C", "E", "F", "G", "Z"],
				itemArr: [

					['Chinese'],
					['English', 'English(UK)', 'English(Australia)'],
					['French'],
					['German1', 'German2', 'German3', 'German4', 'German5', 'German6', 'German7', 'German8', 'German9',
						'German10', 'German11', 'German12', 'German13', 'German14', 'German15', 'German16'
					],
					['z'],
				]
			}
		},
		methods: {
			onCell(e) {
				console.log(e);
				this.defaultValue = e
			},

		}
	}
</script>
<style lang="scss" scoped>
	page {
		padding: 40rpx;
		padding-top: 44px;
	}

	.list-cell {
		/* #ifndef APP-PLUS */
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		/* #endif */
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		padding: 20rpx 0;
	}

	.f24333 {
		margin: 60rpx 0;
	}

	.f14666 {
		margin: 40rpx 0;
	}
</style>